feat: add visual indicators for global/project custom modes in mode selector #6504
Conversation
…elector - Add (G)/(P) indicators in mode dropdown list for custom modes - Show (Global)/(Project) text in selected mode button - Add helper functions to determine mode source and display text - Add translation keys for global/project indicators in EN, FR, ES, DE - Add comprehensive tests for new functionality - Only show indicators for custom modes, not built-in modes Fixes #6502
dosubot
bot
added
size:L
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
There was a problem hiding this comment.
Thank you for your contribution! I've reviewed the changes and found that the implementation effectively addresses the requirements from issue #6502. The code is clean and well-structured with good test coverage. I have some suggestions for improvement, particularly around internationalization completeness.
| "global": "Global", | ||
| "project": "Project", | ||
| "globalShort": "G", | ||
| "projectShort": "P" |
There was a problem hiding this comment.
The PR only adds translations for 4 languages (en, fr, es, de) but the codebase supports 18 languages total. The missing translations for the other 14 languages (ca, hi, id, it, ja, ko, nl, pl, pt-BR, ru, tr, vi, zh-CN, zh-TW) could cause the mode source indicators to display as untranslated keys like "chat:modeSelector.global" for users of those languages. Could we add translations for all supported languages to ensure a consistent experience for all users?
| const SEARCH_THRESHOLD = 6 | ||
|
|
||
| // Helper function to get the source of a custom mode | ||
| function getModeSource(mode: ModeConfig, customModes?: ModeConfig[]): "global" | "project" | null { |
There was a problem hiding this comment.
Consider defining a type or enum for mode source values instead of using string literals "global" | "project" throughout the code. This would improve type safety and maintainability. For example:
| expect(trigger.textContent).not.toContain("(Global)") | ||
| expect(trigger.textContent).not.toContain("(Project)") | ||
| }) | ||
| }) |
There was a problem hiding this comment.
Consider adding test cases for edge scenarios:
- What happens when a custom mode has no source field (should default to "global" as per the implementation)
- Behavior when customModes array is undefined or null
- Ensuring the source indicator styling works correctly in both light and dark themes
These tests would help ensure robustness of the feature.
| <span className="truncate"> | ||
| {selectedMode?.name || ""} | ||
| {selectedModeSourceText && ( | ||
| <span className="text-vscode-descriptionForeground ml-1">({selectedModeSourceText})</span> |
There was a problem hiding this comment.
The source indicator rendering logic is duplicated between the trigger button (lines 211-213) and dropdown items (lines 282-286). Consider extracting this into a small component for better reusability and consistency. For example:
hannesrudolph
added
the
Issue/PR - Triage
- Add global, project, globalShort, projectShort keys to all 18 locale files - Supports visual indicators for custom mode sources in ModeSelector - Completes internationalization for issue #6502
hannesrudolph
added
PR - Needs Preliminary Review
and removed
Issue/PR - Triage
|
This doesn't look good, closing for now |
github-project-automation
bot
moved this from PR [Needs Prelim Review]
to Done
in Roo Code Roadmap
This PR implements visual indicators to distinguish between global and project-level custom modes in the mode selector, addressing issue #6502.
Changes Made
UI Enhancements
(G)and(P)next to custom mode names in the dropdown list(Global)or(Project)text next to the selected custom mode nameImplementation Details
getModeSource()andgetSourceDisplayText()to determine and format mode source indicatorsisCustomModefunction from@roo/modesto identify custom modessourcefield fromCustomModesManagerwhich already tracks "global" vs "project" originInternationalization
modeSelector.global/modeSelector.project(full text)modeSelector.globalShort/modeSelector.projectShort(abbreviated)Testing
User Experience
text-vscode-descriptionForeground) to avoid UI clutterAcceptance Criteria Met
✅ Show "(G)" next to global custom modes in dropdown
✅ Show "(P)" next to project custom modes in dropdown
✅ Built-in modes show no indicator
✅ Selected mode button shows full "(Global)" or "(Project)" text
✅ Indicators use muted text color
✅ No visual clutter introduced
Fixes #6502
Important
Add visual indicators for global and project custom modes in the mode selector with UI updates, helper functions, and internationalization.
ModeSelector.tsx: Added indicators(G)and(P)for global and project custom modes in dropdown and full text in selected mode button.getModeSource()andgetSourceDisplayText()functions to determine and format mode source indicators.isCustomModefrom@roo/modesto identify custom modes.sourcefield fromCustomModesManagerfor mode origin.chat.jsonfiles.ModeSelector.spec.tsxto verify indicators for custom modes and absence for built-in modes.This description was created by
for 3575d87. You can customize this summary. It will automatically update as commits are pushed.